<template>
  <!-- Begin page -->
  <div id="wrapper">
    <!-- Top Bar Start -->
    <topbar_manage :page_title="page_title" :userInfo="this.userInfo" v-if="this.userInfo!=''"></topbar_manage>
    <!-- Top Bar End -->

    <!-- ========== Left Sidebar Start ========== -->
    <leftsidebar_manage :userInfo="this.userInfo" v-if="this.userInfo!=''"></leftsidebar_manage>
    <!-- Left Sidebar End -->

    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->

    <div class="content-page">
      <!-- Start content -->
        <div class="container">
          <component :is="componentId" :transport_data="transport_data"></component>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- End Right content here -->
    <!-- ============================================================== -->
    <!-- Right Sidebar -->
  </div>
</template>

<script>
   import Addworker from "@/components/Content/Addworker";
   import Workerinfo from "@/components/Content/Workerinfo";
   import Modifyworker from "@/components/Content/Modifyworker";
   import Batchaddworker from "@/components/Content/Batchaddworker"
   import Groupinfo from "@/components/Content/Groupinfo"
   import Addmemberinfo from "@/components/Content/Addmemberinfo"
   import Addgroupinfo from "@/components/Content/Addgroupinfo"
   import Groupdetailinfo from "@/components/Content/Groupdetailinfo"
    import Addmemberinfoex from "@/components/Content/Addmemberinfoex"
   import axios from "axios";
   export default {
     data() {
       return {
         page_title: "", // 页面标题
         componentId: "", // 动态默认组件
         transport_data: "", // 子组件接收对象
         token: "", // 子组件接收对象

         // 用户基本属性
         user_number:'',
         name:'',
         permission:'',
         state:'',

         userInfo: "", // 子组件接收的用户信息，用于显示
         path_rule: {
           workerinfo:"Workerinfo",
           addworker:"Addworker",
           modifyworker:"Modifyworker",
           batchaddworker:"Batchaddworker",
           groupinfo:"Groupinfo",
           addmemberinfo:"Addmemberinfo",
           addgroupinfo:"Addgroupinfo",
           groupdetailinfo:"Groupdetailinfo",
           addmemberinfoex:"Addmemberinfoex",
         }
       };
     },
     components: {
       Addworker,
       Workerinfo,
       Modifyworker,
	     Batchaddworker,
       Groupinfo,
       Addmemberinfo,
       Addgroupinfo,
       Groupdetailinfo,
       Addmemberinfoex,
     },
     watch: {
       $route() {
         // console.log(this.$route.params.pathMatch); // 监听路由变化
         var path_ = this.$route.params.pathMatch; // 获取到了通配符匹配到的路径 /share
         var choices_ = this.path_rule[path_];
         if (choices_ == null) {
           return; // 无效路径无需操作
         } else {
           this.componentId = choices_;
           this.page_title = choices_;
         }

       }
     },
     created() {
       // 因为所有的非法或者合法链接都链接到index页面中
       // 所以在index组件中需要进行非法判断之类的，用代码实现
       // 先判断是否已经登录，否则跳转到登录页

         this.getUser();

     },
     methods: {
       open_error(mes) {
         this.$notify.error({
           title: "错误",
           message: mes,
           position: "bottom-right",
           duration: 3000
         });
       },
       refersh_all_component(value) {
         // console.log("刷新子组件");
         if (this.$route.params.pathMatch == "all") {

         }
       },
       logout(){
          localStorage.clear();
          this.$router.push('/signin');
       },
       // 根据token获取用户的基本信息
       getUser() {
         // 从浏览器缓存拿token到vuex  防止刷新浏览器就丢失token
         this.$store.commit("set_token", window.localStorage.getItem("tokenLogin"));
         this.$axios.get('/api/taoyun/v1/getUser')
           .then((res) => {
             if (res.data.code == "200") {
               this.userInfo = res.data.data;
               this.$store.commit("set_info", this.userInfo.userId);
               this.$store.commit("set_department", this.userInfo.department);
             } else if (res.data.code == "500") {
               this.jump_to_login();
             }
           })
           // 接口改动  会直接出现500的err  不会出现json->data->code=500 的情况
           .catch((err) => {
             this.jump_to_login();
           });
       },

       // 检测到token失效，跳转到登录页
       jump_to_login() {
         let that = this;
         this.open_error("认证已经过期,跳转到登录页面");
         setTimeout(function() {
           that.$router.push({
             path: "/signin"
           });
         }, 0)
       },
     },

     mounted() {
       var path_ = this.$route.params.pathMatch;
       if (path_ == "") {
         path_ = "all";
       }
       var choices_ = this.path_rule[path_];
       if (choices_ == null) {
         choices_ = "all";
         this.componentId = this.path_rule["all"];
       } else {
         this.page_title = choices_;
         this.componentId = choices_;
       }
       // console.log("请求数据");
       if (window.localStorage.getItem("list") ) {
               this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
           }

       window.addEventListener("beforeunload",()=>{
               window.localStorage.setItem("list",JSON.stringify(this.$store.state))
           })
     }
   };
</script>
